import React, { useEffect, useState } from "react";
import { Button, Space, Table, Modal, Form, Input } from "antd";
import type { TableProps } from "antd";
import type { FormProps } from "antd";
import api from "../../api/axios";
function App() {
  interface DataType {
    key: string;
    name: string;
    age: number;
    content: string;
    tags: string[];
    title: string;
    updatedAt: string;
  }
  //form
  type FieldType = {
    title: string;
    content: string;
  };
  type FieldType1 = {
    title: string;
    content: string;
  };
  const [list, setList] = useState([]);
  const [total, setTotal] = useState();
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [title, setTitle] = useState<string>();
  const [added, setAdded] = useState(false);
  //form
  const [form] = Form.useForm();
  const getData = async () => {
    const res = await api.get("/article/list", {
      params: {
        page, //页码
        pageSize, //每页显示条数
        keyword: title, //搜索标题
      },
    });
    // console.log(res)
    setList(res.data.rows);
    setTotal(res.data.count);
  };
  //modal框
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  // 新增
  const addList = () => {
    setIsModalOpen(true);
    form.resetFields();
    setAdded(true);
  };
  //编辑
  const [editid, setEditid] = useState("");
  const editlist = (record) => {
    setIsModalOpen(true);
    form.setFieldsValue(record);
    setEditid(record.id);
    setAdded(false);
  };
  // form 表单按钮
  const onFinish: FormProps<FieldType1>["onFinish"] = async (values) => {
    if (added) {
      try {
        const res = await api.post("/article", {
          ...values,
          authorId: 47529555,
        });
        console.log(res);
        setIsModalOpen(false);
        getData();
      } catch (error) {}
    } else {
      const res1 = await api.put(`/article/${editid}`, values);
      console.log(res1);
      setIsModalOpen(false);
      getData();
    }
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  useEffect(() => {
    getData();
  });
  const columns: TableProps<DataType>["columns"] = [
    {
      title: "Id",
      dataIndex: "id",
      key: "id",
    },
    {
      title: "姓名",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "商品",
      dataIndex: "content",
      key: "content",
    },
    {
      title: "结束日期",
      dataIndex: "updatedAt",
      key: "updatedAt",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <Button>删除</Button>
          <Button onClick={() => editlist(record)}>编辑</Button>
        </Space>
      ),
    },
  ];
  return (
    <div>
      <Button type="primary" onClick={() => addList()}>
        新增内容
      </Button>
      <div>
        <Table<DataType> columns={columns} rowKey="id" dataSource={list} />
      </div>
      {/* model框 */}
      <div>
        <Modal
          title={added ? "编辑" : "新增"}
          closable={{ "aria-label": "Custom Close Button" }}
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
        >
          <Form
            form={form}
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            initialValues={{ remember: true }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item<FieldType>
              label="姓名"
              name="title"
              // rules={[
              //   { required: true, message: "Please input your username!" },
              // ]}
            >
              <Input />
            </Form.Item>

            <Form.Item<FieldType>
              label="商品"
              name="content"
              // rules={[
              //   { required: true, message: "Please input your password!" },
              // ]}
            >
              <Input />
            </Form.Item>
            <Form.Item label={null}>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    </div>
  );
}

export default App;
